import React, { Component } from 'react';
import style from './Login.module.scss'
import { NavBar, Icon } from 'antd-mobile'
import axios from '../../utils/fecthLogin'
class Login extends Component {
    state = {
        account: "",
        password: "",
        num: "获取验证码",
        verificationShow: 'none',
        loginShow: "",
        verificationCode: '',
        title: '登录',
    }
    handleAccountChange = (e) => {
        console.log(e.target.value)
        let account = e.target.value
        this.setState({
            account,
        })
    }
    handlePasswordChange = (e) => {
        let password = e.target.value
        this.setState({
            password,
        }, () => {
            console.log(this.state)
        })
    }
    //处理登录
    handleLogin = () => {
        console.log(this.state)
        axios.post("/loginCheck", {

            username: this.state.account,
            password: this.state.password


        }).then((res) => {
            console.log(res)
        })
    }
    //处理注册
    handleRegister = () => {
        let state = this.state
        if (state.verificationShow) {
            this.setState({
                verificationShow: "",
                title: "注册",
                loginShow: "none"
            })

        }
        if (!state.verificationShow) {
            console.log(1213)
            axios.post("createUser", {
                mobile: state.account,
                username: state.account,
                password: state.password,
                code: state.verificationCode
            }).then((res) => {
                console.log(res)
                if (res.status === 200) {
                    this.setState({
                        verificationShow: 'none',
                        loginShow: "",
                        title: "登录"
                    })
                }

            })
        }




    }
    //获取验证码
    getVerificationShow = () => {
        let num = 60
        let phoneNum = this.state.account
        axios.get("/getMobileCode", {
            params: {
                mobile: this.state.account
            }
        }).then((res) => {
            console.log(res)
        })
        let time = setInterval(() => {
            if (num == 0) {

                this.setState({
                    num: "重新获取验证码"
                }, () => {
                    console.log(4548)
                })
                console.log(this.state.num)
                clearInterval(time)

            } else if (phoneNum) {
                this.setState({
                    num,
                })
                num--
            }

        }, 1000)
    }

    handleCode = (e) => {

        this.setState({
            verificationCode: e.target.value
        })
    }
    render() {
        return (
            <div className={style.loginContentBox}>
                <NavBar className={style.indexNav}
                    style={{ backgroundColor: 'var(--themeColor)' }}

                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}

                >{this.state.title}</NavBar>
                <div className={style.loginContent}>
                    <input className={style.loginInput} type={style.text} placeholder="账号" onChange={this.handleAccountChange} value={this.state.account} name="" id="" />
                    <input className={style.loginInput} type={style.password} placeholder="密码" onChange={this.handlePasswordChange} value={this.state.password} name="" id="" />
                    <div style={{ display: this.state.verificationShow }} className={style.getVerificationcode}>
                        <input type="text" onChange={this.handleCode} name="" id="" />
                        <div className={style.codeButton} onClick={this.getVerificationShow}>{this.state.num}</div>
                    </div>
                    <div style={{ display: this.state.loginShow }} className={style.longinButton} onClick={this.handleLogin}>登录</div>
                    <div className={style.registeredButton} onClick={this.handleRegister}>注册</div>
                </div>
            </div>
        );
    }
}

export default Login;
